<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/shopList.css">
</head>
<body>
<header>
    <div class="i">
        <div class="inner container">
            <h1><a href="index.html">灵光显卡铺</a></h1>
            <div>
                <a href="javascript:void(0)" id="toShopCart">
                    <svg version="1.1" id="Layer_3" xmlns:x="&amp;ns_extend;" xmlns:i="&amp;ns_ai;" xmlns:graph="&amp;ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24" enable-background="new 0 0 24 24" xml:space="preserve">
                    <title>我的购物车</title>
                        <switch>
						<foreignObject requiredExtensions="&amp;ns_ai;" x="0" y="0" width="1" height="1">
							<i:pgfref xlink:href="#adobe_illustrator_pgf">
							</i:pgfref>
						</foreignObject>
                            <g i:extraneous="self">
							<g>
								<path d="M17,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S18.1,18,17,18z"></path>
                                <path d="M7,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S8.1,18,7,18z"></path>
                                <path d="M15.6,13c0.6,0,1.3-0.4,1.6-1l3.6-6.6C21.1,5,21,4.4,20.5,4.1C20,3.9,19.4,4,19.1,4.5L15.5,11h-7L6.2,6L5.2,4L4.3,2H1v2
									h2l3.6,7.6L5.2,14c-0.7,1.3,0.2,3,1.8,3h12v-2H7l1.1-2H15.6z"></path>
							</g>
						</g>
					</switch>
                </svg>
                </a>
                <a href="javascript:void(0);" id="loginBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>我的账户</title><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33C4.62 15.49 4 13.82 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z"></path></svg>
                </a>
            </div>
        </div>
    </div>
    <div class="o">
        <div class="outer container">
            <a href="javascript:void(0);">资讯</a>
            <a href="shopList.html">产品 & 商城</a>
        </div>
    </div>
</header>

<main id="main">
    <div class="inner container">
        <div class="breadcrumbs">
            <span v-for="(item , index) in breadcrumbs" :key="index"><a :href="item.url">{{item.title}}</a><span v-show="index+1 < breadcrumbs.length"> > </span></span>
        </div>
        <div class="h1">
            <h1>选购显卡</h1>
        </div>
        <div class="search">
            搜索
            <input type="text" name="searchName" placeholder="搜索型号" v-model="searchName">
            <button @click="setOrderType(2)">价格降序</button>
            <button @click="setOrderType(1)">价格升序</button>
            <button @click="clear">还原</button>
        </div>

        <div class="goodsBlock" v-for="(item , index) in filterGoods" :key="index">
            <div class="mainpg">
                <div class="sale clearfix">
                    <div class="saleimg">
                        <img src="./images/2080TiMain.jpg">
                    </div>
                    <div class="salebt">
                        <p>{{item.title}}</p>
                        <div class="salest">
                            {{item.content}}<br>
                            <span class="money">￥{{item.price}}</span><br>
                        </div>
                    </div>
                    <div class="sBtn clearfix">
                        <div class="salebtn">
                            <a :href="item.url">
                                <p>立即购买</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分割线 -->
            <div class="hr">
                <hr />
            </div>
        </div>
    </div>
</main>

<footer>
    <div class="mail container">
        <div class="mailImg">
            <img src="./images/mail.png" alt="">
        </div>
        <div class="mailInfo">
            订阅我们的新资讯、新商品 与 优惠信息
        </div>
        <form action="">
            <input type="email" placeholder="您的邮箱" required>
            <input type="submit" value="提交">
        </form>
    </div>
    <div class="copyright">
        <div class="inner container">
            &copy;2020 LingGuang Griphics Shop. <a href="javascript:void(0);">隐私</a>
        </div>
    </div>
</footer>


<div id="loginLayout">
    <div class="container login">
        <div class="loginTabs">
            您的用户名： 退出
        </div>
    </div>
</div>
</body>
<script src="./js/tools.js"></script>
<script src="./js/header.js"></script>
<script src="./js/vue-2.6.12.js"></script>
<script>
    let goods = [
        {title: 'NVIDIA 英伟达 GeForce RTX2080Ti 11G 公版显卡',content: '【旗舰游戏】图灵核心/专属背板/11GB/352Bit/4K游戏推荐！',price: 9999,url: '3060ti.html'}
        , {title: 'NVIDIA 英伟达 GeForce RTX2080 Super 8G 公版显卡',content: '【精悍做工】全自动化制程技术，轴流风扇强劲散热，强化背板！',price: 6299,url: '3060ti.html'}
        , {title: 'NVIDIA 英伟达 GeForce RTX2070 Super 8G 公版显卡',content: '【冷静散热】2K游戏，信仰之灯！',price: 4299,url: '3060ti.html'}
        , {title: 'NVIDIA 英伟达 GeForce RTX2060 Super 8G 公版显卡',content: '【甜品王者】SUPER战力超燃！三年质保！RTX2070小兄弟！高规散热带背板！游戏性能赶超1070TI！',price: 2999,url: '3060ti.html'}
    ]
    let breadcrumbs = [
        {title: '首页',url: 'index.html'}
        , {title: '浏览商品',url: 'shopList.html'}
    ]
    const vm = new Vue({
        el: '#main',
        data: {
            orderType: 0, //0 代表不排序, 1 为升序, 2 为降序
            searchName: '',
            goods,
            breadcrumbs
        },
        methods: {
            setOrderType(orderType){
                this.orderType = orderType
            },
            clear(){
                this.searchName = ''
                this.orderType = 0
            }
        },
        computed: {
            filterGoods(){
                let { orderType, searchName, goods } = this
                goods = goods.filter(p => p.title.indexOf(searchName) !== -1)
                if (orderType !== 0) {
                    goods = goods.sort(function (p1, p2) {
                        if (orderType === 1) {
                            return p1.price - p2.price
                        } else {
                            return p2.price - p1.price
                        }
                    })
                }
                return goods
            }
        }
    })
</script>
</html>